<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 
    同源策略：规定只有在同协议+同IP（同域名）+同端口的情况下才可以发送请求
    源：协议+ IP + 端口
    同源策略不允许跨域

    跨域：发送请求获取不同项目地址内的数据
     -->
    <button onclick="cli()">点击获取</button>
    <script>
   function cli() {
     fetch("http://localhost:3000/api/query").then(function (data) {
                return data.text();

             }).then(function (res) {
                console.log(res);
             }) 
  }


        // function cli() {
            //  fetch("http://localhost:3000/query").then(function (data) {
            //     return data.text();

            //  }).then(function (res) {
            //     console.log(res);
            //  })  

            // jsonp跨域 只允许get请求
            //html自带的标签中 img link a script 都会发送get 请求获取外部资源（允许跨域）
            // 会将外部资源文件直接运行
            // 如果数据只是一个值（对象，数组， 字符串）那么在js语句中会报错
            // 后端返回的结果就是要运行的js代码
            // 所有后端不能只返回一个值

            // 设置一份全局函数 将这个函数的函数名传递给服务端
            // 在服务端接收到这个函数名 在响应时
        //     var script = document.createElement('script');
        //     script.src = "http://192.168.21.249:3002/query?callback=run";
        //     document.body.appendChild(script);

            
        // }
        // function run(res) {
        //         console.log("run被调用了");
        //         console.log(res);
        //     }
    </script>
</body>

</html>